<template>
  <div class="im-layout">
    <div class="desktop">
      <!-- <el-button type="primary" size="default" @click="onOpen">add window</el-button> -->

      <IM></IM>
      <!-- <window @min="handleMinimize"></window> -->
    </div>
    <div class="task-bar">
      <!-- <TaskBar>
        <TaskBarItem
          v-for="task in tasks.values()"
          :key="task.id"
          :title="task.title"
          :icon="task.icon"
          :callback="task.callback"
        />
      </TaskBar> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, getCurrentInstance, createVNode, render } from "vue";
import IM from "./IM.vue";
import TaskBar from "./taskbar/TaskBar.vue";
import TaskBarItem from "./taskbar/TaskBarItem.vue";
import Window from "./window/Window.vue";

const proxy = getCurrentInstance();

interface TaskItem {
  id: string | number;
  title: string;
  icon?: string;
  callback?: Function;
}

const tasks = ref<Map<any, Object>>(new Map());

function handleMinimize(data: any, callback: Function) {
  console.log("min", data, callback);
  // tasks.value.push({
  //   id: 1,
  //   title: data.title,
  //   icon: data.icon,
  //   callback: callback,
  // });
  tasks.value.set(data.id, {
    id: 1,
    title: data.title,
    icon: data.icon,
    callback: callback,
  });
}
</script>

<style scoped lang="less"></style>
